import styles from './index.less';
import React, { useState, useEffect } from 'react';
import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';
import IconFont from '@/public/Icon/index';
import { Input, Button, Tag, DatePicker, Popover } from 'antd';
import 'moment/locale/zh-cn';
// 时间选择器底部英文-->中文
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
interface AddTask {
  content: string;
  startTime: string;
  endTime: string;
  clickStatu: boolean;
  showTime: boolean;
}
export default function AddTask() {
  const [task, setTask] = useState<AddTask>({
    content: '',
    startTime: '',
    endTime: '',
    clickStatu: true,
    showTime: false,
  });
  // 用于时间选择器以及tag使用的时间
  const [defaultTime, setDefaultTime] = useState<any>({
    time: '',
    tag: '',
  });
  // 自定义时间时的时间选择器是否展示
  const [definedDatePickShow, setDefinedDatePick] = useState(false);
  // useRef
  const inputRef = React.useRef<any>(null);
  // Input获得焦点配置参数
  const sharedProps = {
    style: { width: '100%' },
    ref: inputRef,
  };
  // 关闭Tag
  const closeTag = () => {
    setTask({ ...task, showTime: false });
  };
  // 取消创建任务
  const onCancle = () => {
    setTask({ ...task, clickStatu: false });
  };
  // 在时间选择器中修改日期
  const changeDate = (date:any) => {
    const todayStart = moment(moment().format('YYYY-MM-DD 00:00'));
    const yestardayStart = moment(moment(todayStart).subtract(1, 'days'));
    const todayEnd = moment(moment().format('YYYY-MM-DD 24:00'));
    const tomorrowEnd = moment(moment(todayEnd).add(1, 'days'));
    console.log(tomorrowEnd, 'tomorrowEndtomorrowEnd');
    let today = '';
    if (todayStart < date && date < todayEnd) {
      today = '(今天)';
    } else if (todayEnd < date && date < tomorrowEnd) {
      today = '(明天)';
    } else if (yestardayStart < date && date < todayStart) {
      today = '(昨天)';
    } else {
      today = `(星期${moment(date).day() == 0 ? '日' : moment(date).day()})`;
    }
    setDefaultTime({ time: date, tag: moment(date).format(`MM月DD日 ${today} HH:mm`) });
  };
  // 创建任务
  const onCreate = () => {
    console.log(defaultTime);
  };
  // 选择今天 明天
  const chooseDefaultTime = (day: string) => {
    if (day == 'today') {
      const time = moment(moment().format('YYYY-MM-DD 18:00'));
      const tag = `${moment().format('M月DD日')}(今天)18:00`;
      setDefaultTime({ time, tag });
    } else if (day == 'tomorrow') {
      const time = moment(moment().add(1, 'days').format('YYYY-MM-DD 18:00'));
      const tag = `${moment().add(1, 'days').format('M月DD日')}(明天)18:00`;
      setDefaultTime({ time, tag });
    }
    setDefinedDatePick(false);
  };
  useEffect(() => {
    // 点击状态是true的时候再去让Input获得焦点
    task.clickStatu ? inputRef.current!.focus({ cursor: 'start' }) : '';
  }, [task.clickStatu]);
  console.log(defaultTime,'s')
  return (
    <div className={styles.task_add}>
      {task.clickStatu ? (
        <div className={styles.task_add_after}>
          <Input {...sharedProps} placeholder="输入任务内容" />
          <div className={styles.btn_container}>
            {task.showTime && (
              <div>
                <Popover
                  placement="bottomLeft"
                  title={''}
                  content={(
                    <DatePicker
                      showTime
                      defaultValue={defaultTime.time}
                      locale={locale}
                      autoFocus
                      onChange={e => {
                        changeDate(e);
                      }}
                    />
                  )}
                  trigger="click"
                >
                  <Tag closable onClose={closeTag} color="gold" style={{ padding: '5px' }}>
                    {defaultTime.tag}
                  </Tag>
                </Popover>
              </div>
            )}
            {!task.showTime && (
              <div className={styles.time_btn_container}>
                <div
                  className={`${styles.time_btn} ${definedDatePickShow ? styles.disabled : ''}`}
                  onClick={() => {
                    setTask({ ...task, showTime: true });
                    chooseDefaultTime('today');
                  }}
                >
                  <IconFont type="iconjintian" className={styles.icon} />
                  今天
                </div> 
                <div
                  className={`${styles.time_btn} ${definedDatePickShow ? styles.disabled : ''}`}
                  onClick={() => {
                    setTask({ ...task, showTime: true });
                    chooseDefaultTime('tomorrow');
                  }}
                >
                  <IconFont type="icona-rili2" className={styles.icon} />
                  明天
                </div>

                <div
                  className={styles.time_btn}
                  onClick={() => {
                    setDefinedDatePick(true);
                  }}
                >
                  <IconFont type="icona-rili3" className={styles.icon} />
                  自定义
                </div>
                {definedDatePickShow ? (
                  <div style={{ height: '30px', lineHeight: '40px', marginLeft: '30px' }}>
                    <DatePicker
                      showTime
                      defaultValue={defaultTime.time}
                      locale={locale}
                      autoFocus
                      style={{ height: '30px', lineHeight: '40px' }}
                      onChange={e => {
                        changeDate(e);
                      }}
                    />
                    <span style={{ marginLeft: '3px', color: '#1890ff' }}>
                      {' '}
                      <CloseCircleOutlined
                        onClick={() => {
                          setDefinedDatePick(false);
                        }}
                      />
                    </span>
                  </div>
                ) : (
                  <span />
                )}
              </div>
            )}
            <div className={styles.function_btn_container}>
              <Button onClick={onCancle}>取消</Button>
              <Button type="primary" className={styles.create_btn} onClick={onCreate}>
                创建
              </Button>
            </div>
          </div>
        </div>
      ) : (
        <div
          className={styles.task_add_before}
          onClick={() => {
            setTask({ ...task, clickStatu: true });
          }}
        >
          <div className={styles.task_add_before_icon_container}>
            <PlusOutlined className={styles.task_add_before_icon} />
          </div>
          <div className={styles.task_add_before_name}>添加任务</div>
        </div>
      )}
    </div>
  );
}
